<template>
  <div class="exciting-content__item" :class="type" @click="sendPath">
    <img v-lazy :data-src="item?.bg" class="bg" />
    <div class="content">
      <span class="content__title">{{ item?.title }}</span>
      <div class="info" v-if="type === 'article'">
        <span class="username">{{ item?.user.nickname }}</span>
        <span class="date">{{ item?.createTime }}</span>
      </div>
      <span class="desc" v-if="type === 'kecheng'">{{ item?.desc }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { IArcticle } from '@/interface/IArticle';
import { useRouter } from 'vue-router';
// kecheng
const props = defineProps<{ type: "article" | "kecheng", item: IArcticle }>();
const router = useRouter();
function sendPath() {

  if (props.type === "article") { // 跳文章
    router.push(`/special/${props.item?.id}/details`)
  } else if (props.type === "kecheng") {// 跳课程

  }
}

</script>

<style lang="scss" scoped>
.exciting-content__item {
  display: flex;
  gap: 10px;
  padding: 16px 0;

  .bg {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;

    &__title {
      width: 245px;
      word-break: break-all;
      color: #2C2C2C;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .info {
      display: flex;
      gap: 4px;

      .username {
        font-size: 14px;
        color: #129D69;
        font-weight: bold;
      }

      .date {
        font-size: 14px;
        color: #727B82;
      }
    }
  }


}

.kecheng {
  flex-direction: column;
  gap: 10px;

  >.bg {
    width: 167px;
    height: 94px;
    object-fit: fill;
  }

  .content__title {
    width: 167px;
  }

  .desc {
    margin-top: 6px;
    color: #727B82;
    font-size: 14px;
  }
}
</style>